import React from 'react'
import Link from 'next/link'
import { Pagination,Modal,message } from 'antd';
import fetchData from '/utils/fetchData'
import Router from 'next/router'
import 'styles/myArticle/myArticle.scss'

class Content extends React.Component{
    constructor(props) {
        super(props)
        this.state={
            dataType:2,//数据类型
            dataTotal:"",//总条数
            dataList:[],
            auditFailureCount:0,//审核失败
            issuedCount:0, //已发布
            infomodal:false,
            infodata:{}
        }
        this.startPage = 1;
        this.pageSize = 6//每页条数
    }

    componentDidMount(){
        if(!JSON.parse(sessionStorage.getItem('user'))){
            Router.push({
                pathname: '/index',
            })
        }
        this.getBaseData(1);
        this.gettipinfo(this.state.dataType)
    }
    gettipinfo(num){
        fetchData.get('/content/pc/hint/info?dateType='+num,
            {headers:{"Authorization":"bearer "+JSON.parse(sessionStorage.getItem('user')).access_token+""}}
        )
        .then((response)=>{
           this.setState({
                auditFailureCount:response.respData.auditFailureCount,
                issuedCount:response.respData.issuedCount
            })
        })
        .catch((error)=> {
        });
    }
    getBaseData(value){
        this.startPage = value;
        fetchData.get('/content/pc/content/query?dataStatus='+this.state.dataType+'&start='+value+'&end='+this.pageSize,
            {headers:{"Authorization":"bearer "+JSON.parse(sessionStorage.getItem('user')).access_token+""}}
        )
        .then((response)=>{
            this.setState({
                dataTotal:response.respData.count,
                dataList:response.respData.resultData
            })
        })
        .catch((error)=> {
        });
    }
    tapType(typeId){
        this.setState({
            dataType:typeId
        },()=>{
            this.gettipinfo(typeId)
            this.getBaseData(1)
        })
        
    }
    seeinfo(id){
        this.setState({infomodal:true});
        fetchData.get('/content/bigShotReport/details?id='+id,
            {headers:{"Authorization":"bearer "+JSON.parse(sessionStorage.getItem('user')).access_token+""}}
        )
        .then((response)=>{
            this.setState({infodata:response.respData});
        })
        .catch((error)=> {
        });
    }
    deleteData(id){
        Modal.confirm({
            content:"确定要执行改操作吗？",
            okText:"确定",
            cancelText:"取消",
            onOk:()=>{
                var data = {
                    contentId:id,
                }
                fetchData.post('/content/pc/content/delete',data,{headers:{"Authorization":"bearer "+JSON.parse(sessionStorage.getItem('user')).access_token+""}})
                .then((response)=>{
                    message.success('删除成功');
                    if(Math.ceil(this.state.dataTotal/this.pageSize) == this.startPage && this.state.dataTotal%this.pageSize == 1 && this.startPage !=1){
                        this.startPage = this.startPage-1
                    }
                    this.getBaseData(this.startPage);
                    this.gettipinfo(this.state.dataType)
                })
                .catch((error)=> {
                });
            },
            onCancel:()=>{}
        })       
    }
    editData(id){
        Modal.confirm({
            content:"确定要执行改操作吗？",
            okText:"确定",
            cancelText:"取消",
            onOk:()=>{
                Router.push({
                    pathname: '/addArticle',
                    query:{'id':id}
                })
            },
            onCancel:()=>{}
        })  
    }
    handleCancel = (e) => {
        this.setState({
            infomodal: false,
        });
    }
    render(){
        return (
            <div className="myArticleContent">
                <div className="header">
                    <span className={this.state.dataType==2?'on':''} onClick={this.tapType.bind(this,2)}>审核中</span>
                    <span className={this.state.dataType==3?'on':''} onClick={this.tapType.bind(this,3)}>
                    {this.state.issuedCount!=0?<var>{this.state.issuedCount>99?'99+':this.state.issuedCount}</var>:''}
                    已发布</span>
                    <span className={this.state.dataType==4?'on':''} onClick={this.tapType.bind(this,4)}>
                    {this.state.auditFailureCount!=0?<var>{this.state.auditFailureCount>99?'99+':this.state.auditFailureCount}</var>:''}
                    审核失败</span>
                </div>
                {
                    this.state.dataList.length != 0 ? 
                    <div>           
                        <ul className="list clearfix">
                            {
                                this.state.dataList.map((item,i)=>{
                                    return(
                                        <li className="li" key={i}>
                                            {this.state.dataType==4?<div className="rightTop"><div className="tipsDiv">{item.refuseReason}</div></div>:''}
                                            <div className="top">                                               
                                                <div className="img">               
                                                    <img src={item.imageAddr} /> 
                                                </div>
                                                <div className="hover">
                                                    {
                                                        this.state.dataType==4?<span className="sp1" onClick={this.editData.bind(this,item.contentId)}></span>:''
                                                    }
                                                    {
                                                        this.state.dataType!=4?<span className="sp3" onClick={this.seeinfo.bind(this,item.contentId)}></span>:''
                                                    }
                                                    <span className="sp2" onClick={this.deleteData.bind(this,item.contentId)}></span>                                                    
                                                </div>
                                            </div>
                                            <div className="bottom">
                                                <div className="p1">{item.title}</div>
                                                <div className="p2">{item.createTime}</div>
                                                <div className="p3">
                                                    <span>{item.typeName}</span>
                                                </div>
                                            </div>
                                        </li>
                                    )
                                })
                            }                
                        </ul>
                        {/* 分页 */}
                        <div className="page">
                            <Pagination current={this.startPage} pageSize={this.pageSize} onChange={this.getBaseData.bind(this)} total={this.state.dataTotal} />
                        </div>
                    </div>:
                    <div className="Nodata">
                        <img src={
                            this.state.dataType == 2 ? 
                            '../static/com/blank1.png' : 
                            (this.state.dataType == 3 ? '../static/com/blank2.png' : '../static/com/blank3.png') 
                        } />
                        <p>页面暂无数据</p>
                    </div>
                }
                {this.state.infomodal?
                    <Modal
                        title={null}
                        visible={this.state.infomodal}
                        footer={null}
                        closable={false}
                        width={600}
                        keyboard={true}
                        className="infomodalbox"
                        maskClosable={true}
                        onCancel={this.handleCancel}
                        >
                        <div className="title">{this.state.infodata.title}</div>
                        <div className="nametimebox">
                            <span>{this.state.infodata.publisherName}</span>
                            <span className="time">{this.state.infodata.createTime}</span>
                        </div>
                        <div dangerouslySetInnerHTML={{__html: this.state.infodata.detail}}></div>
                    </Modal>
                :''}

            </div>
        )
    }
}

export default Content

